<!DOCTYPE html>
<html>
<head>
    <title>Editor Example</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="../js/sea.js" type="text/javascript"></script>
</head>
<body>
<h1>Editor</h1>

<div>

    <div id="editor">

    </div>
    <hr/>
    <form id="addForm" method="post" class="form-horizontal" role="form">

        <div class="form-group">
            <label for="id" class="col-md-2 control-label">Titel ： </label>

            <div class="col-md-10">
                <input id="id" name="id" type="text" class="col-md-8"/>
            </div>
        </div>

        <div class="form-group">
            <label for="desc" class="col-md-2 control-label">Content ： </label>

            <div class="col-md-10">
                <textarea cols="80" id="desc" name="desc" rows="10" class="col-md-8">

                </textarea>
            </div>
        </div>

        <div id="nav">
            <button id="abtn" type="button" class="btn btn-primary">Submit</button>
            <button id="openBtn" type="button" class="btn btn-primary">Open</button>
            <button id="source" type="button" class="btn btn-primary">Source</button>
        </div>
    </form>
    <hr>
    <div id="preView"></div>
</div>
<br/>


<script type="text/javascript">
    function htmlEncode(value){
        return $('<div/>').text(value).html();
    }
    function htmlDecode(value){
        return $('<div/>').html(value).text();
    }
    var fromOptions = {
        url: '/api/user/$id',
        target: '#addForm',
        type: 'POST',
        dataType: 'json',
        clearForm: true,
        resetForm:true,
        beforeSerialize:function(form,options){
            console.info('==================');
            console.log(form);
            console.log(options);
            console.info('==================');
        },
        beforeSubmit: function (formData, jqForm, options) {
            console.info('--------------');
            console.log(formData);
            console.info('--------------');
            return true;
        },
        success: function (data, statusText) {
            console.log("submit success.");
            alert('submit success.');
            console.log(data);
        },
        column: [
            [
                {field: 'id', title: '用户ID', width: 60, align: 'center'},
                {field: 'desc', title: '描述', align: 'center'}
            ]
        ]
    }

    seajs.config({ 'base': '../js/base' });
    seajs.use('lib/editor', function (editor) {
        editor.init(function ($) {
            $(document).ready(function () {
               var editor1 =  $('#desc').ckeditor();

                $('#abtn').click(function () {
                    //var text = $('#desc').html()
                    console.info('====================>');
                    console.log(editor1);
                    console.log(editor1.val());
                   $('#addForm').ajaxSubmit(fromOptions);
                });

                $('#openBtn').click(function () {
                    var ids = $('#id').fieldValue();
                    alert(ids);
                    $.getJSON('/api/user/'+ids,function(data,status){
                        console.info(data);
                        console.info(status);
                        alert('aaaaa');
                        $('#preView').html();
                        $('#preView').append(data.desc);

                    });
                });
            });
        });
    });


</script>


</body>
</html>